<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('auth.rule.title') })"
        />
        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <!--  <Table ref="tableRef" :pagination="false" /> -->

        <table class="table" style="background-color: #fff;width: 100%" v-loading="load">
            <tr>
                <th>选择</th>
                <th class="left" style="padding-left: 15px" width="25%">菜单名称</th>
                <th>图标</th>
                <th>名称</th>
                <th>类型</th>
                <th>缓存</th>
                <th>状态</th>
                <th>权重</th>
                <th>组件路径</th>
                <th>操作</th>
            </tr>
           
            <template v-for="(item,index) in data.one">
                <tr @dblclick="edit(item.id)">
                            <td>
                                  <el-checkbox :value="item.id"/>
                            </td>
                            <td class="left" style="padding-left: 15px;font-weight: bold;color:#333">
                                <span @click="showChild(item.id,index)">
                                    <el-icon size="12" :style="'opacity:'+(data.navs[item.id]!=null?1:0)"><block v-if="item.zhankai"><ArrowDown/></block><block v-else><ArrowRight/></block></el-icon> {{item.title}}
                                </span>
                            </td>
                            <td><Icon :name="item.icon" size="15"/></td>
                            <td>{{item.name}}</td>
                            <td><el-tag class="ml-2" :type="item.type_color">{{item.type_name}}</el-tag></td>
                            <td>
                                <el-switch v-model="item.keepalive" size="small" active-value="1" inactive-value="0"  @change="edit_column($event,item.id)"/>
                            </td>
                            <td>
                                <el-switch v-model="item.status" size="small" active-value="1" inactive-value="0" @change="edit_column($event,item.id,'status')"/>
                            </td>
                            <td>{{item.weigh}}</td>
                            <td>{{item.component}}</td>
                            <td>
                                <el-button type="danger" :icon="Delete" size="small" @click ="del(item.id)"/>
                                <el-button type="primary" name="edit"  :icon="Edit" size="small" title="edit" @click ="edit(item.id)"/>
                            </td>
                </tr>

                <template v-for="(item2,index2) in data.navs[item.id]" v-if="data.navs[item.id]!=null" v-show="item2.show == 1">
                            <tr v-show="item2.show == 1" @dblclick="edit(item2.id)">
                                <td>
                                  <el-checkbox :value="item2.id"/>
                                </td>
                                <td class="left pad2">
                                        <span @click="showChild(item2.id,index2,2,item.id)">
                                            ﹂<el-icon size="12" :style="'opacity:'+(data.navs[item2.id]!=null?1:0)"><block v-if="item2.zhankai"><ArrowDown/></block><block v-else><ArrowRight/></block></el-icon> {{item2.title}}
                                        </span>
                                </td>
                                <td><Icon :name="item2.icon" size="15"/></td>
                                <td>{{item2.name}}</td>
                                <td><el-tag class="ml-2" :type="item2.type_color">{{item2.type_name}}</el-tag></td>
                                <td>
                                    <el-switch v-model="item2.keepalive" size="small" active-value="1" inactive-value="0" @change="edit_column($event,item2.id)" lazy/>
                                </td>
                                <td> 
                                    <el-switch v-model="item2.status" size="small" active-value="1" inactive-value="0" @change="edit_column($event,item2.id,'status')" lazy/>
                                </td>
                                <td>{{item2.weigh}}</td>
                                <td>{{item2.component}}</td>
                                <td>
                                    <el-button type="danger" :icon="Delete" size="small" @click="del(item2.id,item.id,index2)"/>
                                    <el-button type="primary" name="edit"  :icon="Edit" size="small" title="edit" @click ="edit(item2.id)"/>
                                </td>
                            </tr>

                            <template v-for="(item3,index3) in data.navs[item2.id]" v-if="data.navs[item2.id]!=null">
                                    <tr v-show="item3.show == 1 && item2.show == 1" @dblclick="edit(item3.id)">
                                        <td>
                                          <el-checkbox :value="item3.id"/>
                                        </td>
                                        <td class="left pad3">
                                                <span @click="showChild(item3.id,index3,3,item2.id)">
                                                    ﹂ <el-icon size="12" :style="'opacity:'+(data.navs[item3.id]!=null?1:0)"><block v-if="item3.zhankai"><ArrowDown/></block><block v-else><ArrowRight/></block></el-icon>  {{item3.title}}
                                                </span>
                                        </td>
                                        <td><Icon :name="item3.icon" size="15"/></td>
                                        <td>{{item3.name}}</td>
                                        <td><el-tag class="ml-2" :type="item3.type_color">{{item3.type_name}}</el-tag></td>
                                        <td>
                                            <el-switch v-model="item3.keepalive" size="small" active-value="1" inactive-value="0" @change="edit_column($event,item3.id)" lazy/>
                                        </td>
                                        <td>
                                            <el-switch v-model="item3.status" size="small" active-value="1" inactive-value="0" @change="edit_column($event,item3.id,'status')" lazy/>
                                        </td>
                                        <td>{{item3.weigh}}</td>
                                        <td>{{item3.component}}</td>
                                        <td>
                                            <el-button type="danger" :icon="Delete" size="small" @click="del(item3.id,item2.id,index3)"/>
                                            <el-button type="primary" name="edit"  :icon="Edit" size="small" title="edit" @click ="edit(item3.id)"/>
                                        </td>
                                    </tr>

                                    <template v-for="(item4,index4) in data.navs[item3.id]" v-if="data.navs[item3.id]!=null">
                                            <tr v-show="item4.show == 1 && item3.show == 1 && item2.show == 1" @dblclick="edit(item4.id)">
                                                <td>
                                                   <el-checkbox :value="item4.id"/>
                                                </td>
                                                <td class="left pad4">
                                                        <span>
                                                            ﹂ {{item4.title}}
                                                        </span>
                                                </td>
                                                <td><Icon :name="item4.icon" size="15"/></td>
                                                <td>{{item4.name}}</td>
                                                <td><el-tag class="ml-2" :type="item4.type_color">{{item4.type_name}}</el-tag></td>
                                                <td>
                                                    <el-switch v-model="item4.keepalive" size="small" active-value="1" inactive-value="0" @change="edit_column($event,item4.id)" lazy/>
                                                </td>
                                                <td>
                                                    <el-switch v-model="item4.status" size="small" active-value="1" inactive-value="0" @change="edit_column($event,item4.id,'status')" lazy/>
                                                </td>
                                                <td>{{item4.weigh}}</td>
                                                <td>{{item4.component}}</td>
                                                <td>
                                                    <el-button type="danger" :icon="Delete" size="small" @click="del(item4.id,item3.id,index4)"/>
                                                    <el-button type="primary" name="edit"  :icon="Edit" size="small" title="edit" @click ="edit(item4.id)"/>
                                                </td>
                                            </tr>
                                    </template>

                             </template>


                </template>
            </template>
      

        </table>
        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { defaultOptButtons } from '/@/components/table'
import { useI18n } from 'vue-i18n'
import { baTableApi } from '/@/api/common'
import baTableClass from '/@/utils/baTable'
import createAxios from "/@/utils/axios";
import {ElMessage, ElMessageBox} from "element-plus";

import {
    Check,
    Delete,
    Edit,
    Refresh,
    Message,
    Search,
    Plus,
    Minus,
    ArrowRight,
    ArrowDown
} from '@element-plus/icons-vue'
defineOptions({
    name: 'auth/rule',
})
const checkList = ref([])
const { t } = useI18n()
const tableRef = ref()
const baTable = new baTableClass(
    new baTableApi('/admin/auth.Rule/'),
    {
        expandAll: false,
        dblClickNotEditColumn: [undefined, 'keepalive', 'status'],
        column: [
            { type: 'selection', align: 'center' },
            { label: t('auth.rule.title'), prop: 'title', align: 'left', width: '200' },
            { label: t('auth.rule.Icon'), prop: 'icon', align: 'center', width: '60', render: 'icon', default: 'fa fa-circle-o' },
            { label: t('auth.rule.name'), prop: 'name', align: 'center', showOverflowTooltip: true },
            { label: '权重', prop: 'weigh', align: 'center', showOverflowTooltip: true },
            {
                label: t('auth.rule.type'),
                prop: 'type',
                align: 'center',
                render: 'tag',
                custom: { menu: 'danger', menu_dir: 'success', button: 'info' },
                replaceValue: { menu: t('auth.rule.type menu'), menu_dir: t('auth.rule.type menu_dir'), button: t('auth.rule.type button') },
            },
            { label: t('auth.rule.cache'), prop: 'keepalive', align: 'center', width: '80', render: 'switch' },
            { label: t('State'), prop: 'status', align: 'center', width: '80', render: 'switch' },
            { label: t('Update time'), prop: 'update_time', align: 'center', width: '160', render: 'datetime' },
            {
                label: t('Operate'),
                align: 'center',
                width: '130',
                render: 'buttons',
                buttons: defaultOptButtons(),
            },
        ],
        dragSortLimitField: 'pid',
    },
    {
        defaultItems: {
            type: 'menu',
            menu_type: 'tab',
            extend: 'none',
            keepalive: 0,
            status:1,
            icon: 'local-erji_1',
        },
    },
    {
        getIndex: () => {
            baTable.table.expandAll = baTable.table.filter?.quickSearch ? true : false
        },
        // 获得编辑数据后
        requestEdit: () => {
            if (baTable.form.items && !baTable.form.items.icon) baTable.form.items.icon = 'fa fa-circle-o'
        },
    }
)

provide('baTable', baTable)
const load = ref(false)
const data = ref([])


const edit_column = (e,id,column) => {
  
    if(column == 'status'){
        var data = {'id':id,'status':e}
    }else{
        var data = {'id':id,'keepalive':e}
    }
    return createAxios({
        url: '/admin/auth.Rule/edit',
        method: 'POST',
        data:data
    }).then(res => {
        ElMessage({'message':'更新成功','type':'success'})
        load.value = false
    }).catch(err => {
        load.value = false
    })
}


const edit = (id = 0) => {
    baTable.toggleForm('Edit',[id])
    baTable.form.loading = true
    baTable.form.operate = 'Edit'  //显示组件弹窗 
}

const del = (id=0,top_id=0,dex=0) =>{
    
    ElMessageBox.confirm(
        '确定删除吗?',
        '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            return createAxios({
                url: '/admin/auth.Rule/del?ids[]='+id,
                method: 'DELETE',
            }).then(res => {
               // getList() 
                data.value.navs[top_id].splice(dex,1)
                ElMessage({'message':'已删除','type':'success'})
            })
        })
        .catch(() => {

        })
}


const showChild = (id , dex = '',mark = 1,top_id = 0) =>{
    console.log(id+'='+dex+'='+mark+'='+top_id)
        if(mark == 1){  //说明点击一级导航
            var show = data.value.one[dex].zhankai
        }
        if(mark >= 2){  //说明点击二级导航
            var show = data.value.navs[top_id][dex].zhankai
        }
        if(show==null || show==''){
            show = false
        }
        var arr =  data.value.navs[id]
        if(arr == null ) return
        for(var i =0; i<arr.length; i++){
            arr[i].show =  show ? 0 : 1;
        }

        if(mark == 1){  //说明点击一级导航
            data.value.one[dex].zhankai = !data.value.one[dex].zhankai
        }
        if(mark >= 2){  //说明点击一级导航
            data.value.navs[top_id][dex].zhankai = !data.value.navs[top_id][dex].zhankai
        }
        
    }
const getList = () => {
    load.value = true
    return createAxios({
        url: '/admin/auth.Rule/index_new',
        method: 'get',
        params:{}
    }).then(res => {
        load.value = false
        data.value = res.data
    }).catch(err => {
    })
}
onMounted(() => {
    // baTable.table.ref = tableRef.value
    // baTable.mount()
    // baTable.getIndex()?.then(() => {
    //     baTable.dragSort()

    //     console.log(baTable.table,"sdasa")
    // })
    getList()
})
</script>

<style scoped lang="scss">
.table{
    border-collapse: collapse;
}
.table tr:hover{
    background-color: #f3f3f3;
}
.table tr td span{
    cursor: pointer;
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
}
.table tr td,.table tr th{
    text-align: center;
    border:1px solid #eee;
    padding: 4px 5px;
    font-size: 12px;
}
.table tr th{
    padding: 9px 5px;
    font-size: 14px;
}
.table tr th{
    color:#333
}
.table tr td{
    color:#666
}
.table .left{
    text-align: left;
}
.table .pad2{
    padding-left: 55px;
}
.table .pad3{
    padding-left:95px;
}
.table .pad4{
    padding-left:125px;
}
</style>
